<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app" ref="button">
			<App ref="app" />
		</div>
		<script src="../node_modules/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let App = {
				template: '<div><h1 id="child" class="child">我是子组件</h1><input ref="input" type="text" v-show="isShow"/></div>',
				data() {
					return {
						isShow: false,
					}
				},
				mounted(){
					this.isShow = true
					//执行输入框自动获取焦点失败，因为DOM渲染需要消耗时间
					//this.$refs.input.focus()
					//$nextTick在DOM更新之后执行回调
					this.$nextTick(()=>{
						this.$refs.input.focus()
					})
				}
			}
			let vm = new Vue({
				el: '#app',
				data(){
					return {
						
					}
				},
				components: { App },
				mounted(){
					//给标签绑定ref则获取原生jsDOM对象
					console.log(this.$refs.button)
					console.log(this.$refs.button.style)
					//给组件绑定ref获取当前组件对象
					console.log(this.$refs.app)
					
					
				}
			})
		</script>
	</body>
</html>
